<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生信息录入</title>
		<link rel="stylesheet" href="element-plus/index.css">
		<script src="js/vue.js"></script>
		<script src="element-plus/index.full.js"></script>
	</head>
	<body>
		<div id='app'>
			<el-card style="max-width: 500px;margin: 50px auto;">
				<el-form 
					label-width='100' 
					:model="formData" 
					:rules="formRules" 
					ref="studentForm"
				>
					<!-- 姓名不能为空 -->
					<el-form-item label='学生姓名' prop="name">
						<el-input v-model="formData.name" placeholder="请输入学生姓名"></el-input>
					</el-form-item>
					<!-- 班级不能为空 -->
					<el-form-item label='班级' prop="class">
						<el-input v-model="formData.class" placeholder="请输入班级"></el-input>
					</el-form-item>
					<!-- 11位数字 -->
					<el-form-item label='联系方式' prop="phone">
						<el-input v-model="formData.phone" placeholder="请输入11位手机号码"></el-input>
					</el-form-item>
					<!-- 性别不能为空 -->
					<el-form-item label='性别' prop="gender">
						<el-radio-group v-model="formData.gender">
							<el-radio :label="1">男</el-radio>
							<el-radio :label="2">女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button @click="submitForm" type='primary'>添加学生</el-button>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						formData: {
							name: '',
							class: '',
							phone: '',
							gender: null
						},
						formRules: {
							name: [
								{ required: true, message: '请输入学生姓名', trigger: 'blur' }
							],
							class: [
								{ required: true, message: '请输入班级', trigger: 'blur' }
							],
							phone: [
								{ required: true, message: '请输入联系方式', trigger: 'blur' },
								{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的11位手机号码', trigger: 'blur' }
							],
							gender: [
								{ required: true, message: '请选择性别', trigger: 'change' }
							]
						}
					}
				},
				methods:{
					submitForm() {
						this.$refs.studentForm.validate((valid) => {
							if (valid) {
								// 这里可以发送表单数据到服务器
								// 模拟API调用
								this.postStudentData();
							} else {
								return false;
							}
						});
					},
					resetForm() {
						this.$refs.studentForm.resetFields();
					},
					postStudentData() {
						// 模拟API请求
						setTimeout(() => {
							this.$message({
								message: '学生信息添加成功',
								type: 'success',
								duration: 2000
							});
							// 重置表单
							this.resetForm();
						}, 500);
					}
				}
			}).use(ElementPlus).mount('#app')
		</script>
	</body>
</html>